<template>
  <Window
    :width="472"
    :height="280"
    :floatright="true"
    :title="lang.linearpaneltitle"
    @cancel="cancel"
    @ok="ok"
    :footervisible="true"
    @showclick="showSelect=false"
  >
    <div class="xbsj-flatten">
      <!-- 采样间隔 -->
      <div class="flatten">
        <label>{{lang.samplinginterval}}:</label>
        <input style="float:left;" type="text" v-model.number="segmentLength" />
      </div>
      <!-- 位置偏移 -->
      <div class="flatten-flex">
        <label>{{lang.position}}</label>
        <div class="flatten-box">
          <input type="text" class="scaleInput" v-model.number="randomLength" />
        </div>
      </div>
      <!-- 朝向 -->
      <div class="flatten">
        <label>{{lang.linerotation}}:</label>
        <input type="radio" id="gdheight" v-model="rotationmode" value="fixed" name="rotationmode" />
        <label class="radiolabel" for="gdheight">{{lang.fixedangle}}</label>
        <input class="radioinput" type="text" v-model="rotation" :readonly="rotationmode!='fixed'" />
        <input
          type="radio"
          id="gheight"
          style="margin-left: 30px;"
          v-model="rotationmode"
          value="radom"
          name="rotationmode"
        />
        <label class="radiolabel" style="min-width: 20px;" for="gheight">{{lang.random}}</label>
      </div>
      <div class="flatten-flex">
        <XbsjCheckBox v-model="getHeightFromTerrain">{{lang.getPositionsHeightFromTerrain}}</XbsjCheckBox>
        <XbsjCheckBox v-model="getHeightFromTileset">{{lang.getPositionsHeightFromTileset}}</XbsjCheckBox>
      </div>
    </div>
  </Window>
</template>
<script>
import languagejs from "./index_locale";
import { getPositionsHeightFromTerrain, getPositionsHeightFromTileset } from "./getHeight"
export default {
  props: {
    getBind: Function
  },
  data () {
    return {
      lang: {},
      langs: languagejs,
      segmentLength: 5,
      rotation: "",
      rotationmode: "fixed",
      getHeightFromTerrain: false,
      getHeightFromTileset: false,
      randomLength: 0,
    };
  },
  mounted () {
    this.obj = this.getBind();
    this._polylinePoints = this.obj.czmObj.positions;
    if (!this._polylinePoints) {
      this._polylinePoints = this.obj.czmObj._polyline.positions;
    }
    // XE.HTML.loadJS("../../../XbsjEarth/thirdParty/turf.min.js")
  },
  methods: {
    close () {
      this.$parent.destroyTool(this);
    },
    cancel () {
      this.close();
    },
    ok () {
      let self = this;
      var points = this.getPositionsAndRotationsFromPolyline(this._polylinePoints, this.segmentLength, this.randomLength);
      var positions = points.map(e => e.position);
      if (this.getHeightFromTerrain && this.getHeightFromTileset) {
        getPositionsHeightFromTileset(this.$root.$earth, positions, function (
          v
        ) {
          if (v) {
            for (var i = 0; i < positions.length; i++) {
              points[i].position = positions[i];
            }
            self.obj.callback(points, self.rotationmode != 'fixed');
          } else {
            getPositionsHeightFromTerrain(
              self.$root.$earth,
              positions,
              function (v) {
                for (var i = 0; i < positions.length; i++) {
                  points[i].position = positions[i];
                }
                self.obj.callback(points, self.rotationmode != 'fixed');
              }
            );
          }
        });
      } else if (this.getHeightFromTerrain) {
        getPositionsHeightFromTerrain(this.$root.$earth, positions, function (
          v
        ) {
          for (var i = 0; i < positions.length; i++) {
            points[i].position = positions[i];
          }
          self.obj.callback(points, self.rotationmode != 'fixed');
        });
      } else if (this.getHeightFromTileset) {
        getPositionsHeightFromTileset(this.$root.$earth, positions, function (
          v
        ) {
          for (var i = 0; i < positions.length; i++) {
            points[i].position = positions[i];
          }
          self.obj.callback(points, self.rotationmode != 'fixed');
        });
      } else {
        self.obj.callback(points, self.rotationmode != 'fixed');
      }
      this.close();
    },
    getPositionsAndRotationsFromPolyline (polylinePositions, segmentLength, randomLength = 0, dirAddDistance = 0.01 * segmentLength) {
      // debugger;
      const td = 180.0 / Math.PI;
      const tr = Math.PI / 180.0;
      const rawLine = polylinePositions.map(e => [e[0] * td, e[1] * td]);
      const line = turf.lineString(rawLine);
      const opts = { units: 'meters' };
      const length = turf.length(line, opts);

      const posAndRots = [];
      let lastD = undefined;
      for (let d = 0.0; d < length - dirAddDistance; d += segmentLength) {
        let d2 = d + (Math.random() - 0.5) * randomLength;
        d2 = d2 < 0 ? 0 : d2;
        const v = turf.along(line, d2, opts);
        const v2 = turf.along(line, d2 + dirAddDistance, opts);
        let b = ((turf.bearing(v, v2) - 90.0) % 360.0) * tr;
        if (this.rotationmode === 'fixed') {
          b += this.rotation * Math.PI / 180;
        }
        const pos = [...turf.getCoord(v).map(e => e * tr), 0];
        posAndRots.push({
          position: pos,
          rotation: [b, 0, 0],
        });

        lastD = d;
      }

      if (length - lastD > (0.5 * segmentLength)) {
        const d = length;
        const d2 = d + (Math.random() - 0.5) * randomLength;
        const v = turf.along(line, d2, opts);
        const v2 = turf.along(line, d2 - dirAddDistance, opts);
        let b = ((turf.bearing(v2, v) - 90.0) % 360.0) * tr;
        if (this.rotationmode === 'fixed') {
          b += this.rotation * Math.PI / 180;
        }
        const pos = [...turf.getCoord(v).map(e => e * tr), 0];
        posAndRots.push({
          position: pos,
          rotation: [b, 0, 0],
        });
      }

      return posAndRots;
    },

  }
};
</script>
<style scoped>
.header-add .add {
  background: url(../../../images/flatten/add.png) no-repeat;
  background-position: center;
  border-left: none !important;
}
.header-add .add:focus {
  outline: none;
}

.item-btn-box input {
  float: left;
}
.item-btn-box .del {
  background: url(../../../images/flatten/del.png) no-repeat !important;
  background-position: center !important;
}
.item-btn-box .edit {
  background: url(../../../images/flatten/edit.png) no-repeat !important;
  background-position: center !important;
}
/* .item-btn-box .edit:hover {
  background: url(../../../images/flatten/edit_on.png) no-repeat !important;
  background-position: center !important;
} */
.item-btn-box .position {
  background: url(../../../images/flatten/position.png) no-repeat !important;
  background-position: center !important;
}
.item-btn-box .autoheight {
  background: url(../../../images/flatten/autoheight.png) no-repeat !important;
  background-position: center !important;
}
.flatten-btn {
  background: none;
  border: none;
  width: 100%;
  height: 34px;
  /* border-left: 1px solid black; */
  margin-top: -1px;
  cursor: pointer;
}
.flatten-btn:focus {
  outline: none;
}
.item-btn-box {
  width: 100%;
  padding-top: 1px;
  border: 1px solid #000;
  border-collapse: collapse;
}
.item-btn-box thead tr {
  border-bottom: 1px solid #000;
}

.item-btn-box thead tr th {
  text-align: center;
  border-right: 1px solid #000;
}
.item-btn-box thead tr th:nth-child(1) {
  width: 30px;
}
.item-btn-box thead tr th:nth-child(2) {
  width: 200px;
}
.item-btn-box tbody tr td {
  border-right: 1px solid #000;
  text-align: center;
}
.item-btn-box tbody tr {
  border-top: 1px solid #000;
}

.iteminput {
  width: 72px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  color: #dddddd;
  padding-left: 10px;
  margin: 2px;
}
.item-order {
  width: 51px;
  height: 34px;
  text-align: center;
  line-height: 30px;
  border-right: none !important;
  border-top: none !important;
}
button {
  background: none;
  border: none;
  margin: 0 auto;
  display: block;
  line-height: 25px;
}
.header-add {
  width: 61px;
  height: 30px;
  /* border-bottom: none !important; */
}
.falatten-body-item div {
  float: left;
}
.header-content {
  width: 264px;
  height: 30px;
  border-left: none !important;
  border-right: none !important;
}
.flatten-table-header {
  width: 100%;
  height: 30px;
}
.flatten-table-header .border {
  float: left;
}
.flatten-table-order {
  width: 51px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  /* border-bottom: none !important; */
}
.xbsj-flatten {
  min-width: 462px;
  height: calc(100% - 15px);
}
.xbsj-flatten > div {
  width: 100%;
  height: 28px;
  margin-top: 15px;
}
.xbsj-flatten label {
  float: left;
  min-width: 50px;
  height: 28px;
  line-height: 28px;
  text-align: right;
  margin-left: 8px;
  margin-right: 15px;
}
.xbsj-flatten .flatten input,
.xbsj-flatten .attributePath input {
  width: calc(100% - 124px);
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  color: #dddddd;
  padding-left: 10px;
}
.xbsj-flatten .attributePlay button {
  width: 99px;
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  cursor: pointer;
}
.xbsj-flatten .attributePlay .playspan {
  display: inline-block;
  width: 17px;
  height: 20px;
  background: url(../../../images/play.png) no-repeat;
  background-size: contain;
  margin-top: 4px;
}
.xbsj-flatten .attributePlay .suspendspan {
  display: inline-block;
  width: 15px;
  height: 20px;
  background: url(../../../images/suspend.png) no-repeat;
  background-size: contain;
  margin-top: 4px;
}
.xbsj-flatten .attributeLocation input,
.xbsj-flatten .attributeAttitude input {
  width: 66px;
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  color: #dddddd;
  padding-left: 10px;
  margin-right: 6px;
}
input[type="text"]:focus,
button:focus {
  outline: 1px solid rgba(31, 255, 255, 1);
}
.flatten-table {
  display: inline-block;
  width: 100%;
}
.border {
  border: 1px solid black;
}
.select-ul {
  width: 80%;
  padding-left: 8px;
  margin-left: calc(10% + 23px);
  background: rgba(138, 138, 138, 1);
  z-index: 9999;
  position: relative;
}

.cutselectbox {
  width: calc(100% - 102px);
  background: rgba(138, 138, 138, 1);
  position: absolute;
  left: 78px;
  border-radius: 0px 0px 4px 4px;
  overflow: auto;
  z-index: 999;
}
.cutselectbox div {
  width: 100%;
  height: 28px;
  font-size: 14px;
  color: rgba(221, 221, 221, 1);
  cursor: pointer;
  line-height: 28px;
}

.cutselectbox div:hover {
  background: rgba(107, 107, 107, 1);
}

.cutselectbox span {
  display: inline-block;
  /* width: 72px; */
  text-align: left;
  margin-left: 10px;
}

.selectButton {
  width: 12px;
  height: 10px;
  border: none;
  background: url(../../../images/titles-select.png) no-repeat;
  background-size: contain;
  cursor: pointer;
  float: right;
  margin-right: 20px;
  margin-top: 10px;
  outline: none;
  position: absolute;
  right: 15px;
  top: 16px;
}
td input {
  height: 28px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  color: #dddddd;
  padding: 0 10px 0 10px;
  width: calc(100% - 20px);
}
.flatten {
  margin-top: 20px;
}
.field {
  /* padding-left: 8px; */
  display: inline-block;
  width: calc(100% - 184px);
  margin-top: 11px;
}
.playButton {
  background: url(../../../images/play.png) no-repeat !important;
  background-size: contain;
  height: 30px;
  width: 100px;
  cursor: pointer;
}
.suspendButton {
  background: url(../../../images/suspend.png) no-repeat !important;
  background-size: contain;
  height: 30px;
  width: 100px;
  cursor: pointer;
}
.scaleInput {
  width: 21%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  border: none;
  color: #dddddd;
  padding: 5px;
  outline: none;
  margin-right: 20px;
}
.dragButton {
  display: inline-block;
  width: 120px;
  height: 25px;
  background: url(../../../images/drag.png) no-repeat;
  background-size: contain;
  text-align: center;
  line-height: 25px;
  margin-left: 74px;
}

.dragButton.highlight {
  background: url(../../../images/drag_on.png) no-repeat;
  background-size: contain;
  color: #1fffff;
}

input[type="radio"] {
  width: 20px !important;
  cursor: pointer !important;
  float: left !important;
  margin-top: 0px !important;
}

.radiolabel {
  cursor: pointer !important;
  margin-left: 2px !important;
}

.radioinput {
  float: left !important;
  width: calc(50% - 122px) !important;
  vertical-align: top !important;
}

input:read-only {
  cursor: not-allowed !important;
}
</style>